
<div class="main_bd">

    <div class="panel panel_overview">
        <div class="panel__hd">
            <h3 class="panel__title">商品列表</h3></div>
        <div class="panel__bd">

            <!--<div class="filter-box">-->
            <!--<a href="" class="btn btn_primary">新建群发</a>-->
            <!--</div>-->
            <table class="list-box cell-border hover stripe" id="Table1">


                <tfoot>

                </tfoot>
            </table>
        </div>
    </div>
</div>
<script>
    function getStatus(status) {
        if(status==3)return '已上架'
        if(status==0)return '未上架'
        return '状态异常';//万一还有其他的呢
    }
    $(function(){
        $('#Table1').DataTable({
            // processing: true,
            serverSide: true,
            paging: true,//开启分页
            lengthMenu: [ //自定义分页长度
                [ 20, 50, 100 ],
                [ '20 页', '50 页', '100页' ]
            ],
            columns: [
                {"title": "货品id", 'data': 'id'},
                {"title": "名称", 'data': 'title'},
                {"title": "缩略图", 'data': 'thumb'},
                {"title": "上架状态", 'data': 'status'},
                {"title": "总销量", 'data': 'sales',"defaultContent":"0"},
                {"title": "发布时间", 'data': 'create_time'},
                {"title": "操作", 'data': 'control'},
            ],
            "ajax": {
                url: "/mall",
                type: "POST",
                data: function (d) {
                    //删除多余请求参数
                    for(var key in d){
                        if(key.indexOf("columns")==0||key.indexOf("order")==0||key.indexOf("search")==0){ //以columns开头的参数删除
                            delete d[key];
                        }
                    }
                    var searchParams= {
                        "page":d.draw,
                        "size":d.length
                    };
                    //附加查询参数
                    if(searchParams){
                        $.extend(d,searchParams); //给d扩展参数
                    }
                },
                dataType : "json",
                "dataSrc": function ( json ) {
                    json.data.map(function(rows){
                        rows.thumb = '<img width="60px" src="'+rows.thumb+'"/>';

                        var  status = 0;
                        if(rows.status==0){
                            status = 3;
                        }
                        rows.control = '<a href="/mall/edit?id='+rows.id+'"  class="btn btn_primary">修改</a>'
                            + '<button onclick="taggleSatus('+status+','+rows.id+')"  style="margin-left: 10px" class="btn btn_warn" >'+(rows.status==3?'下架':'上架')+'</button>';

                        rows.status = getStatus(rows.status);
                    })
                    // for ( var i=0, len=json.data.length ; i<len ; i++ ) {
                    //
                    // }
                    return json.data;
                },
                dataFilter: function (json) {
                    //json是服务器端返回的数据
                    json = JSON.parse(json);
                    console.log(json)
                    var returnData = {};
                    // returnData.draw = json.data.current_page;
                    returnData.recordsTotal = json.data.total;//返回数据全部记录
                    returnData.recordsFiltered = json.data.total;//后台不实现过滤功能，每次查询均视作全部结果
                    returnData.data = json.data.data;//返回的数据列表
                    return JSON.stringify(returnData);//这几个参数都是datatable需要的，必须要
                }
            },
            oLanguage:{ // 国际化配置
                "sProcessing" : "正在获取数据，请稍后...",
                "sLengthMenu" : "显示 _MENU_ 条",
                "sZeroRecords" : "没有找到数据",
                "sInfo" : "从 _START_ 到  _END_ 条记录 总记录数为 _TOTAL_ 条",
                "sInfoEmpty" : "记录数为0",
                "sInfoFiltered" : "(全部记录数 _MAX_ 条)",
                "sInfoPostFix" : "",
                "sSearch" : "查询",
                "sUrl" : "",
                "oPaginate" : {
                    "sFirst" : "第一页",
                    "sPrevious" : "上一页",
                    "sNext" : "下一页",
                    "sLast" : "最后一页"
                }
            }
        });
    })

    function taggleSatus(id,status) {
        var action = 'up';

        if(status==0){
            action = 'down'
        }
        $.post('/mall/'+action,{id:id},function(res){
            if(res.body.code==1){
                layer.msg('切换成功');
            }
        })
    }
</script>